/**
 * 响应式测试模块
 */

import React from 'react';
import { Card, Typography, Row, Col } from 'antd';
import ResponsiveTest from '../../ResponsiveTest';

const { Paragraph } = Typography;

const ResponsiveTests: React.FC = () => {
  return (
    <div>
      <Paragraph>
        响应式设计测试，验证组件在不同屏幕尺寸下的适配效果。
      </Paragraph>
      
      <Row gutter={16}>
        <Col xs={24} sm={12} md={8} lg={6}>
          <Card size="small" title="超小屏幕">xs: 24</Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <Card size="small" title="小屏幕">sm: 12</Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <Card size="small" title="中等屏幕">md: 8</Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <Card size="small" title="大屏幕">lg: 6</Card>
        </Col>
      </Row>

      <Card style={{ marginTop: 16 }}>
        <ResponsiveTest />
      </Card>
    </div>
  );
};

export default ResponsiveTests;
